<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      margin: 200px auto;
      /*
      线性渐变默认从上到下
      径向渐变 默认从中心向四周
       background: radial-gradient(red,green);

         background: radial-gradient(at top left,red,green);
         代表左上角向四周扩散


               background: radial-gradient(at 200px 100px,red,green);
      可以通过坐标来设置从哪个位置开始

      径向渐变可以指定扩散的范围
            background: radial-gradient(100px,red,green);


    如果需要同时指定扩散的位置和范围 扩散的范围需要写到at的前面
      background: radial-gradient(100px at 200px 100px,red,green);


      */
      background: radial-gradient(100px at 200px 100px,red,green);
    }
  </style>
</head>

<body>
<div></div>
</body>
</html>